<template>

	<div class="drag optional" :class="{ selected: index === selectedIndex }"
		@click.stop="$parent.$parent.onEditer(index)" :style="{
			background: item.style.bgcolor,
			paddingLeft: item.style.paddingLeft + 'px',
			paddingRight: item.style.paddingLeft + 'px',
			paddingTop: item.style.paddingTop + 'px',
			paddingBottom: item.style.paddingBottom + 'px'
		}">
		<div class="diy-product" :style="{
				background: item.style.background,
				borderTopLeftRadius: item.style.topRadio + 'px',
				borderTopRightRadius: item.style.topRadio + 'px',
				borderBottomLeftRadius: item.style.bottomRadio + 'px',
				borderBottomRightRadius: item.style.bottomRadio + 'px'
			}">
			<div :class="['display__' + item.style.display]">
				<ul class="product-list" :class="['column__' + item.style.column]" :style="getUlwidth(item)">
					<li class="product-item" v-for="(product, index) in item.data" :key="index">
						<!-- 单列商品 -->
						<template v-if="item.style.column == 1">
							<div class="product-item-box">
								<!-- 商品图片 -->
								<div class="product-cover"><img v-img-url="product.image" /></div>
								<div class="product-info">
									<!-- 商品名称 -->
									<div v-if="item.params.productName" :style="{color: item.style.product_name_color}"
										class="product-title">
										<span>{{ product.product_name }}</span>
									</div>
									<!-- 商品卖点 -->
									<!-- <div v-if="item.style.show.sellingPoint" class="selling-point gray9">
										<span>{{ product.selling_point }}</span>
									</div> -->
									<!-- 商品销量 -->
									<!-- <div v-if="item.style.show.productSales" class="already-sale">
										<span>已售{{ product.product_sales }}件</span>
									</div> -->
									<!-- 商品价格 -->
									<div class="price d-s-c">
										<div v-if="item.params.productPrice"
											:style="{color: item.style.product_price_color}">
											<span>¥</span>
											<span class="f18 fb">{{ product.product_price }}</span>
										</div>
										<div class="ml10 gray9 text-d-line"
											v-if="item.params.linePrice && product.line_price > 0"
											:style="{color: item.style.line_price_color}">
											<span>¥</span>
											<span>{{ product.line_price }}</span>
										</div>
									</div>
								</div>
							</div>
						</template>

						<!-- 两列三列 -->
						<template v-else>
							<div class="product-cover"><img v-img-url="product.image" /></div>
							<div class="product-info p-0-10">
								<div v-if="item.params.productName" class="product-title"
									:style="{color: item.style.product_name_color}">{{ product.product_name }}</div>
								<div class="price d-s-c f12">
									<div v-if="item.params.productPrice"
										:style="{color: item.style.product_price_color}">
										<span>¥</span>
										<span class="">{{ product.product_price }}</span>
									</div>
									<div class="ml4 gray9 text-d-line"
										v-if="item.params.linePrice && product.line_price > 0"
										:style="{color: item.style.line_price_color}">¥{{ product.line_price }}</div>
								</div>
							</div>
						</template>
					</li>
				</ul>
			</div>
		</div>
		<div class="btn-edit-del">
			<div class="btn-del" @click.stop="$parent.$parent.onDeleleItem(index)">删除</div>
		</div>
	</div>
</template>

<script>
import ProductApi from '@/api/product.js';
export default {
	data() {
		return {
			/*商品列表*/
			tableData: {},
			/*分类id*/
			category_id: 0
		};
	},
	created() {
		/*获取列表*/
		this.getData();
	},
	props: ['item', 'index', 'selectedIndex'],
	methods: {
		getData() {
			let self = this;
			ProductApi.productList({
				category_id: self.category_id
			},
			true
			)
				.then(res => {
					self.tableData = res.data.list.data;
				})
				.catch(error => {
					self.loading = false;
				});
		},

		/*计算宽度*/
		getUlwidth(item) {
			console.log(item);
			if (item.style.display == 'slide') {
				let total = 0;
				if (item.params.source == 'choice') {
					total = item.data.length;
				} else {
					total = item.defaultData.length;
				}
				let w = 0;
				if (item.style.column == 2) {
					w = total * 150;
				} else {
					w = total * 100;
				}
				return 'width:' + w + 'px;';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.diy-product {
		overflow: hidden;
	}

	.diy-product .product-list.column__1 .product-item {
		padding: 10px;
		border-bottom: 1px solid #dddddd;
		background: #ffffff;
	}

	.diy-product .product-list.column__1 .product-item-box {
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
	}

	.diy-product .display__slide {
		overflow-x: auto;
	}

	.diy-product .display__slide .product-list {
		display: flex;
		justify-content: flex-start;
	}

	.diy-product .display__slide .product-list.column__2 .product-item {
		width: 150px;
	}

	.diy-product .display__slide .product-list.column__3 .product-item {
		width: 100px;
	}

	.diy-product .display__slide .product-list .product-item {
		margin-right: 10px;
	}

	.diy-product .product-list img {
		width: 100%;
	}

	.diy-product .product-list.column__1 .product-cover {
		width: 100px;
		height: 100px;
	}

	.diy-product .product-list.column__1 .product-info {
		margin-left: 10px;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.diy-product .product-list .product-title {
		margin-top: 4px;
		height: 40px;
		line-height: 20px;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.diy-product .display__list .column__2,
	.diy-product .display__list .column__3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.diy-product .product-list.column__2 .product-item {
		width: 170px;
		margin-bottom: 5px;
		margin-top: 5px;
		background: #ffffff;
	}

	.diy-product .product-list.column__2 .product-item .product-cover {
		width: 150px;
		height: 150px;
		overflow: hidden;
		margin: 10px auto;
	}

	.diy-product .product-list.column__3 .product-item {
		width: 117px;
		margin-bottom: 10px;
		background: #ffffff;
	}

	.diy-product .product-list.column__3 .product-item .product-cover {
		width: 117px;
		height: 117px;
		overflow: hidden;
	}

	.diy-product .product-list.column__3 .product-item .product-cover img {
		width: 117px;
	}

	.diy-product .product-list.column__2 .product-title,
	.diy-product .product-list.column__3 .product-title {
		height: 40px;
		overflow: hidden;
	}
</style>